<!-- @format -->

<template>
  <div class="article-container">
    <div class="article-list">
      <h2 class="article-title">文章列表</h2>

      <input
        v-model="searchText"
        placeholder="搜索文章..."
        class="search-input"
        @input="handleSearch"
      />

      <view v-if="error" class="error-alert">
        <text>{{ error }}</text>
      </view>

      <div v-if="loading.list" class="loading-container">
        <base-loading message="加载中..."></base-loading>
      </div>

      <template v-else>
        <view class="article-list-items">
          <view
            v-for="article in filteredArticles"
            :key="article.path"
            :class="{ selected: selectedArticle === article.name }"
            @click="handleArticleClick(article)"
            class="article-item"
          >
            {{ article.name.replace('.md', '') }}
          </view>
        </view>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch, onMounted } from 'vue'
import { debounce } from 'lodash'
import { GiteeService } from '../services/giteeService'
import { useCache } from '../composables/useCache'
import BaseLoading from './BaseLoading.vue'

interface Article {
  name: string
  path: string
}

interface Props {
  config: {
    owner: string
    repo: string
    articles: string
  }
}

const props = defineProps<Props>()

const articles = ref<Article[]>([])
const filteredArticles = ref<Article[]>([])
const selectedArticle = ref('')
const loading = ref({
  list: false,
})
const error = ref<string | null>(null)
const searchText = ref('')

const giteeService = new GiteeService()
const articlesCache = useCache<Article[]>('articles-cache')

const loadArticles = async () => {
  loading.value.list = true
  error.value = null

  try {
    const cachedArticles = articlesCache.getItem()
    // if (cachedArticles) {
    //   articles.value = cachedArticles
    //   return
    // }

    const contents = await giteeService.getDirectoryContents(
      props.config.owner,
      props.config.repo,
      props.config.articlesPath
    )

    const mdArticles = contents.filter((item: any) => item.name.endsWith('.md'))
    articles.value = mdArticles
    articlesCache.setItem(mdArticles)
  } catch (err) {
    error.value = '加载文章列表失败，请稍后重试'
    console.error('加载文章列表失败:', err)
  } finally {
    loading.value.list = false
  }
}

const handleArticleClick = (article: Article) => {
  const query = `owner=${props.config.owner}&repo=${props.config.repo}&path=${article.path}`
  uni.navigateTo({
    url: `/pages/article/detail?${query}`,
  })
}

const handleSearch = debounce((e: Event) => {
  const value = (e.target as HTMLInputElement).value
  filteredArticles.value = articles.value.filter((article) =>
    article.name.toLowerCase().includes(value.toLowerCase())
  )
}, 300)

watch(
  articles,
  (newArticles) => {
    filteredArticles.value = newArticles
  },
  { immediate: true }
)

onMounted(() => {
  loadArticles()
})
</script>

<style scoped>
.article-container {
  padding: 1rem;
  min-height: 600px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.article-list {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.article-title {
  font-size: 24px; /* 标题字体大小 */
  font-weight: bold; /* 加粗 */
  color: #2c405a; /* 标题颜色 */
  margin-bottom: 1rem; /* 标题下方间距 */
  border-bottom: 2px solid #007aff; /* 底部边框 */
  padding-bottom: 0.5rem; /* 底部内边距 */
}

.search-input {
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  font-size: 14px;
}

.error-alert {
  color: #dd524d; /* 错误提示颜色 */
  margin-bottom: 1rem;
}

.article-list-items {
  display: flex;
  flex-direction: column;
  padding: 0;
  flex-grow: 1;
  overflow-y: auto;
}

.article-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid #eaecef;
  transition: background-color 0.3s, transform 0.2s;
  border-radius: 4px;
  background-color: #fff;
  color: #333; /* 列表项文本颜色 */
  font-size: 16px; /* 列表项字体大小 */
}

.article-item:hover {
  background-color: #e6f7ff; /* 悬停时的背景颜色 */
  transform: scale(1.02); /* 悬停时的缩放效果 */
}

.article-item.selected {
  background-color: #cce5ff; /* 选中时的背景颜色 */
  border-right: 3px solid #007bff; /* 选中时的右边框 */
  font-weight: bold; /* 选中时加粗 */
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}
</style>
